<template>
  <div>

<!--  办公用品 Vue  -->
<!--    <el-page-header @back="goBack" title="行政" content="办公用品" ></el-page-header>-->
    <!--    高查    -->
    <el-row justify="start">
      <el-col :span="7">
        <div style="margin-top: 15px;">
          <el-form :inline="true" v-model="admArticlesPlus"  class="demo-form-inline">

            <el-form-item label="物品名称:">
              <el-input v-model="admArticlesPlus.name" placeholder="请输入物品名称" >
                <el-button slot="append" @click="getArticles" icon="el-icon-search"></el-button>
              </el-input>

            </el-form-item>
          </el-form>
        </div>

      </el-col>

      <!--  添加按钮  -->
      <el-col :span="3">
        <div style="margin-top: 15px;">
          <el-button  @click="addAdmArticles" >添加</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table
        :data="admArticlesData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="申请人"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="number"
          label="数量">
      </el-table-column>
      <el-table-column
          prop="approveStatus"
          :formatter="zhuanhuanzhi"
          label="审批状态">
      </el-table-column>
    </el-table>

<!--
  https://blog.csdn.net/qq_38949960/article/details/103769884

https://blog.csdn.net/weixin_40877388/article/details/107046471
  -->



    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2, 4, 6, 8]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total">
    </el-pagination>


<!--添加对话框-->

    <!-- 添加对话框 -->
    <el-dialog
        title="申请用品"
        :visible.sync="dialogVisible"
        width="50%">

<AddAdmArticles @addOk="addok"></AddAdmArticles>

    </el-dialog>


  </div>
</template>

<script>

// 引入添加用品模块
import AddAdmArticles from "./AddAdmArticles";

export default {
  name: "AdmArticles",
  components:{AddAdmArticles},
  data(){
    return{
      pageData:{},// 存放分页数据
      admArticlesData:[],
      admArticlesPlus:{
        pageCur:"1",//页码
        pageSize:"2"//每页显示多少
      },
      dialogVisible:false
    }
  },
  created() {
    this.getArticles()
  },
  methods:{
    handleSizeChange(val){
      this.admArticlesPlus.pageSize=val
      this.getArticles();
    },
    handleCurrentChange(val){
      this.admArticlesPlus.pageCur=val
      this.getArticles()

    },
    getArticles(){

      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get("admarticles", {params:this.admArticlesPlus})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.pageData= res.data.data
        this.admArticlesData = res.data.data.list
      })
    },

//数据转换
    zhuanhuanzhi(row) {
      return row.approveStatus == 1 ? "审批中" : row.approveStatus == 2 ? "审批通过" : row.approveStatus == 3 ? "审批不通过" : "未知状态";
    },
    addAdmArticles(){ //添加按钮弹出对话框
        this.dialogVisible=true
    },
    addok() { //添加成功处理
      this.dialogVisible=false //关闭对话框
      this.getArticles() //从新查询渲染
    },
      goBack(){this.$router.go(-1);} //返回上一个页面


  }
}
</script>

<style scoped>

</style>